<template>
  <!-- 书籍详情页导航栏组件 -->
  <div class="detailsTop">
    <!-- 在md及以上的屏幕展现 -->
    <navigation class="d-none d-md-block">
      <router-link :to='this.$store.state.loginPath' slot="login" class="navbar-brand">{{this.$store.state.loginState}}</router-link>
      <router-link to='/home' slot="home" class="nav-link">首页</router-link>
      <router-link to='/userOnlineHistry' slot="history" class="nav-link">书库</router-link>
      <router-link to='/details' slot="details" class="nav-link">商城</router-link>

      <search-books slot="search" />
    </navigation>

    <!-- 仅在小于md的屏幕展现 -->
    <mobile-navigation class="d-block d-md-none container bg-white shadow-sm">
      <search-books slot="center" class="" />
    </mobile-navigation>
  </div>
</template>

<script>
  import Navigation from 'components/Navigation/Navigation'
  import SearchBooks from 'components/Navigation/SearchBooks'
  import MobileNavigation from 'components/Mobile/MobileNavigation'

  export default {
    name: 'DetailsTop',
    components: {
      Navigation,
      SearchBooks,
      MobileNavigation
    },
    data () {
      return {

      }
    }
  }

</script>

<style scoped>
  .userImg {
    width: 50px;
  }
</style>